<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>知文招标网论坛 - 首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="images/fyLogo.png">
    <meta name="mobile-web-app-capable" content="yes">
    <!--  <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">
    <link rel="stylesheet" href="css/amazeui.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="short icon" href="images/28.jpg">
    <style>
        
        html, body{
          height:100%;
        }
        
        .moon{
          width:100%;
          height:100%;
          position:fixed;
          z-index:10;
          top:0;
          left:0;
          background:black;
          opacity:0.5;
          display:none;
        }
    </style>
</head>


<body id="blog">
<div class="moon"></div>
<div id="app">
	<header class="am-g am-g-fixed blog-fixed blog-text-center blog-header">
	    <div class="am-u-sm-8 am-u-sm-centered">
	        <img width="200" src="images/fyLogo.png"/>
	        <h2 class="am-hide-sm-only">枫叶花语：坚毅、刚强、坚忍不拔、不畏苦难、自制能力。 </h2>
	    </div>
	</header>
	<hr>
	<nav class="am-g am-g-fixed blog-fixed blog-nav">
	    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only blog-button"
	            data-am-collapse="{target: '#blog-collapse'}"><span class="am-sr-only">导航切换</span> <span
	            class="am-icon-bars"></span></button>
	    <div class="am-collapse am-topbar-collapse" id="blog-collapse">
	        <ul class="am-nav am-nav-pills am-topbar-nav">
	            <li class="am-active"><a href="lw-index.html">首页</a></li>
	            <!--  
	            <li><a href="lw-index.html">类别</a></li>
	            <li><a href="lw-index.html">类别</a></li>
	            <li><a href="lw-index.html">类别</a></li>
	            <li><a href="lw-index.html">类别</a></li>
	            <li><a href="lw-index.html">类别</a></li>
	            -->
	        </ul>
	        <form class="am-topbar-form am-topbar-right am-form-inline" role="search">
	            <div class="am-form-group">
	                <input type="text" class="am-form-field am-input-sm" placeholder="搜索">
	            </div>
	        </form>
	    </div>
	</nav>
	<hr>
	
	<div class="am-g am-g-fixed blog-fixed am-u-sm-centered blog-article-margin">
	    <div data-am-widget="slider" class="am-slider am-slider-b1" data-am-slider='{&quot;controlNav&quot;:false}'>
	        <ul class="am-slides">
	            <li>
	                <img src="images/i/b1.jpg">
	            </li>
	            <li>
	                <img src="images/i/b2.jpg">
	            </li>
	            <li>
	                <img src="images/i/b3.jpg">
	            </li>
	        </ul>
	    </div>
	</div>
	<!-- banner end -->
	
	<!-- content srart -->
	<div class="am-g am-g-fixed blog-fixed">
	    <div class="am-u-md-8 am-u-sm-12" id="myArticle">
	    	<div>暂无文章</div>
	    	<div>
	    		<article class="am-g blog-entry-article">
		            <div class="am-u-lg-12 am-u-md-12 am-u-sm-12 am-u-sm-centered blog-entry-img">
		                <img src="./images/i/f10.jpg" alt="" class="am-u-sm-12">
		            </div>
		            <div class="am-u-lg-12 am-u-md-12 am-u-sm-12 blog-entry-text blog-text-center">
		                <span class="blog-color">用户名 &nbsp;</span>
		                <span>发布时间</span>
		                <h1><a target="_blank" href="">文章标题</a></h1>
		                <p>文章描述</p>
		                <p><a href="" class="blog-continue">continue reading</a></p>
		            </div>
		        </article>
		        <article class="am-g blog-entry-article">
		            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
		                <img src="./images/i/f12.jpg" alt="" class="am-u-sm-12">
		            </div>
		            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
		                <span class="blog-color">用户名 &nbsp;</span>
		                <span>发布时间</span>
		                <h1><a target="_blank" href="">文章标题</a></h1>
		                <p>文章描述</p>
		                <p><a href="" class="blog-continue">continue reading</a></p>
		            </div>
		        </article>
	    	</div>
	        
	    </div>
	
	    <div class="am-u-md-4 am-u-sm-12 blog-sidebar">
	        <div class="blog-sidebar-widget blog-bor myInfo">
	            <h2 class="blog-text-center blog-title"><span>我的信息</span></h2>
	            <img src="./images/i/f14.jpg" alt="about me" class="blog-entry-img">
	            <p id="name">用户昵称：匿名</p>
	            <p id="des">自我介绍：暂无</p>
	            <p id="saying">座右铭：暂无</p>
	            <button type="button" class="am-btn am-btn-primary am-radius changeInfo">修改个人信息</button>
	        </div>
	        <div class="blog-sidebar-widget blog-bor">
	            <h2 class="blog-text-center blog-title"><span>我发表的文章</span></h2>
	            <ul class="am-list">
	            	<li>暂无文章</li>
	                <li><a href="#">新发布文章标题</a></li>
	                <li><a href="#">新发布文章标题</a></li>
	                <li><a href="#">新发布文章标题</a></li>
	            </ul>
	            <br/>
	            <button type="button"  class="am-btn am-btn-success am-radius" onclick="uploadArticle()">发布新文章</button>
	            
	        </div>
	    </div>
	</div>
	<!-- content end -->
	
	<!--    修改个人信息的弹框-->
	<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt_2" >
	    <div class="am-modal-dialog">
	        <div class="am-modal-hd">修改个人信息</div>
	        <form class="am-form" data-am-validator>
	            <fieldset>
	                <div class="am-form-group">
	                    <label for="doc-vld-ta-2">用户昵称：</label>
	                    <input type="text" class="am-modal-prompt-input">
	                </div>
	                <div class="am-form-group">
	                    <label for="doc-vld-ta-2">自我介绍：</label>
	                    <input type="text" class="am-modal-prompt-input">
	                </div>
	                <div class="am-form-group">
	                    <label for="doc-vld-ta-2">座右铭：</label>
	                    <input type="text" class="am-modal-prompt-input">
	                </div>
	            </fieldset>
	        </form>
	        <div class="am-modal-footer">
	            <span class="am-modal-btn" data-am-modal-cancel  onclick="exitChange()">取消</span>
	            <span class="am-modal-btn" data-am-modal-confirm onclick="changeInfo()">提交</span>
	        </div>
	    </div>
	</div>
	
	<!--    发布文章的弹框-->
    <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt" >
        <div class="am-modal-dialog">
            <div class="am-modal-hd">发布新文章</div>
            <form class="am-form" data-am-validator action="" method="post" enctype="multipart/form-data">
                <fieldset>
                    <input type="text" class="am-modal-prompt-input" placeholder="文章标题" id="atitle" >
                    <input type="text" class="am-modal-prompt-input" placeholder="文章介绍" id="adescript">
                    <div class="am-form-group">
                        <label for="doc-vld-ta-2">文章内容：</label>
                        <textarea id="doc-vld-ta-2" minlength="10" maxlength="8000" style="height: 370px"></textarea>
                    </div>
                    	请选择文章类别：
                    <select data-am-selected id="aType">
                        <option value="xxx">xxxx</option>
                    </select>
                    <div style="align-content: center">请选择文章封面：<input type="file"  name="pic" accept="image/gif, image/jpeg" onchange="changefile(event)"></div>
                </fieldset>
            </form>
            <div class="am-modal-footer">
                <span class="am-modal-btn" data-am-modal-cancel onclick="exitChangeA()">取消</span>
                <span class="am-modal-btn" onclick="submitForm()">提交</span>
            </div>
        </div>
    </div>
	
	
	<footer class="blog-footer">
	    <div class="am-g am-g-fixed blog-fixed am-u-sm-centered blog-footer-padding">
	        <div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
	            <h3>网站简介</h3>
	            <p class="am-text-sm">这是一个使用 amazeUI 做的博客网站前端 。<br> <br> 支持响应式，包括主页、文章页、媒体页等。<br><br>
	                嗯嗯嗯，不知道说啥了，外面的世界真精彩。<br><br></p>
	        </div>
	        <div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
	            <h3>开发体会</h3>
	            <p>初心是追求卓越，然而时间、经验、能力有限，<br>所以此博客网站仍有很多不足的地方，<br>希望大家包容、多提意见、建议。感谢！</p>
	        </div>
	        <div class="am-u-sm-12 am-u-md-4- am-u-lg-4">
	            <h1>我站在巨人的肩膀上</h1>
	            <h3>所使用的技术</h3>
	            <p>
		            <ul>
		                <li>jQuery</li>
		                <li>amazeui.js</li>
		                <li>Vue.js</li>
		                <li>axios.js</li>
		                <li>...</li>
		            </ul>
	            </p>
	        </div>
	    </div>
	    <div class="blog-text-center"> © 2021 CGL - license</div>
	</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/checkLogin.js"></script>
<script src="assets/js/type.js"></script>
<script>
let pic = '';
$(()=>{
	$(".myInfo .blog-entry-img").attr("src",userinfo.photo);
	$("#name").html(`名字：${userinfo.uname}`);
	$("#des").html(`自我介绍:${userinfo.descript}`);
	$("#saying").html(`座右铭:${userinfo.motto}`);
})

//修改个人信息
$(".changeInfo").click(function(){
    $("#my-prompt_2").css({
    	display:'block',
    	opacity:1,
        transform:'translateY(-50%)'
    });
    $(".moon").css("display","block");
    $("#my-prompt_2 input").eq(0).val(userinfo.uname);
    $("#my-prompt_2 input").eq(1).val(userinfo.descript);
    $("#my-prompt_2 input").eq(2).val(userinfo.motto);
});

//取消修改
function exitChange(){
	 $(".moon").css("display","none");
	 $("#my-prompt_2").css("display","none");
}

function exitChangeA(){
	$(".moon").css("display","none");
	 $("#my-prompt").css("display","none");
}



function uploadArticle(){
	console.log("a");
	$("#my-prompt").css({
    	display:'block',
    	opacity:1,
        transform:'translateY(-50%)'
    });
	$(".moon").css("display","block");
	
}

//上传文件
//文件上传  请求头必须改成:Content-type:'multipart/form-data'
function submitForm(){
	if( pic == null || pic == ""){
		alert("请选择图片");
		return;
	}
	let formData = new FormData();
	formData.append("title",$("#atitle").val());
	formData.append("descript",$("#adescript").val());
	formData.append("content",$("#doc-vld-ta-2").val());
	formData.append("tid",$("#aType").val());
	formData.append("title",pic);
	
	$.ajax({
		url:"updateServlet",
		type:"POST",
		data:formData,
	    processData:false,
		contentType:false,
		sucess:function(data){
			
		}
	});
}

function changefile(event){
	pic = event.target.files[0];
}

function changeInfo(){
	$.post("userServlet",{
		op:"changeInfo",
		uname: $("#my-prompt_2 input").eq(0).val(),
	    des:$("#my-prompt_2 input").eq(1).val(),
	    motto:$("#my-prompt_2 input").eq(2).val()
	},data=>{
		if(data>0){
			alert("修改成功")
		    $(".moon").css("display","none");
		    $("#my-prompt_2").css("display","none");
		    //更新数据
		    $("#name").html("用户昵称："+$("#my-prompt_2 input").eq(0).val());
		    $("#des").html("自我描述："+$("#my-prompt_2 input").eq(1).val());
		    $("#saying").html("座右铭："+$("#my-prompt_2 input").eq(2).val());
		}else{
			alert("修改失败")
		}
	},"text");
}

//显示文章
$(()=>{
	$.post("article",{
		op:"findArticle"
	},data=>{
		let str = ``;
		if(data.length <= 0){
			$("#myArticle").html("<div>暂无文章</div>");
		}else{
			data.forEach((item,index)=>{
				if(index == 0){
					str += `
						<div>
			    		<article class="am-g blog-entry-article">
				            <div class="am-u-lg-12 am-u-md-12 am-u-sm-12 am-u-sm-centered blog-entry-img">
				                <img src="${item.pic}" alt="" class="am-u-sm-12">
				            </div>
				            <div class="am-u-lg-12 am-u-md-12 am-u-sm-12 blog-entry-text blog-text-center">
				                <span class="blog-color">${item.uname} &nbsp;</span>
				                <span>${item.adate}</span>
				                <h1><a target="_blank" href="">${item.title}</a></h1>
				                <p>${item.descript}</p>
				                <p><a href="" class="blog-continue">continue reading</a></p>
				            </div>
				        </article>
					
					`;
				}else{
					str += `<article class="am-g blog-entry-article">
		            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-img">
		                <img src="${item.pic}" alt="" class="am-u-sm-12">
		            </div>
		            <div class="am-u-lg-6 am-u-md-12 am-u-sm-12 blog-entry-text">
		                <span class="blog-color">${item.uname} &nbsp;</span>
		                <span>${item.adate}</span>
		                <h1><a target="_blank" href="">${item.title}</a></h1>
		                <p>${item.descript}</p>
		                <p><a href="" class="blog-continue">continue reading</a></p>
		            </div>
		        </article>
	    	</div>`
				}
			})
			str += `</div>`;
			$("#myArticle").html(str);
		}
	},"json");
})

</script>

</body>
</html>